<template>
  <div id="swiper">
    <slot></slot>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item,index) in datalist" :key="index" id="swiperbox">
          <div v-for="(item,index) in item" :key="index" class="swiperitem">
            <img :src="'https://fuss10.elemecdn.com'+item.image_url" alt />
            {{item.title}}
          </div>
        </div>
      </div>
      <!-- Add Pagination -->
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>

<script>
import Swiper from "../assets/js/swiper.min.js";
import "../assets/css/swiper.min.css";
export default {
  props: ["datalist"],
  data() {
    return {
      swiperlist: [],
    };
  },
  updated() {
    var swiper = new Swiper(".swiper-container", {
      loop: true,
      pagination: {
        el: ".swiper-pagination",
      },
    });
  },
  mounted() {},
};
</script>

<style>
#swiper {
  width: 100%;
}
#swiper img {
  width: 100%;
}
#swiperbox {
  width: 100%;
}
.swiperitem {
  width: 25%;
  float: left;
  box-sizing: border-box;
  padding: 20px;
  font-size: 12px;
}
</style>